<template>
    <div class="image-card justify-content-center align-items-stretch d-flex py-5">
        <div class="card">
            <div class="img-box flex-grow-0 flex-shrink-0 d-flex align-items-center justify-content-center">
                <img :src="`${doc.baseInfo.src}?size=${window.innerWidth}`" alt="Card image cap">
            </div>
            <div class="d-flex image-info flex-grow-1">
                <div class="card-block p-2 d-flex flex-column" style="max-width: 40%;">
                    <h4 class="card-title">基本信息</h4>
                    <div class="info-list flex-grow-1">
                        <div class="card-text" v-for="(value, key) in baseInfo">
                            <span class="mr-2">{{key}} : </span><span class="font-weight-bold">{{value}}</span>
                        </div>
                    </div>
                </div>
                <div class="card-block p-2 flex-grow-1 d-flex flex-column">
                    <h4 class="card-title">扩展信息</h4>
                    <div class="info-list flex-grow-1">
                        <ul class="nav nav-tabs" role="tablist">
                            <template v-for="(key, index) in groupedExtendInfo.keys">
                                <li class="nav-item">
                                    <a
                                        :class="{active: index == 0}"
                                        class="nav-link" :id="groupedExtendInfo.uid + '-tab-' + index"
                                        data-toggle="tab"
                                        :href="'#' + groupedExtendInfo.uid + '-' + index"
                                        role="tab"
                                        :aria-controls="groupedExtendInfo.uid + '-' + index"
                                        aria-selected="true">{{key}}</a>
                                </li>
                            </template>
                        </ul>
                        <div class="tab-content">
                            <div
                                v-for="(key, index) in groupedExtendInfo.keys"
                                :class="{active: index == 0}"
                                class="tab-pane fade show"
                                :id="groupedExtendInfo.uid + '-' + index"
                                role="tabpanel"
                                :aria-labelledby="groupedExtendInfo.uid + '-tab-' + index"
                            >
                                <div class="d-flex flex-column" v-for="info in groupedExtendInfo.data[key]">
                                    
                                    
                                    <pre class="p-1" style="word-break: break-all; white-space: pre-line;">{{info.content}}</pre>
                                    <div class="d-flex flex-grow-1 align-items-center flex-row" style="border-bottom: 1px solid #eee;">
                                        <small class="ml-auto text-muted mr-1">{{formateDate(info.date)}}</small>
                                        <i class="btn btn-sm material-icons mr-1 px-1 text-muted" @click="$emit('editExtendInfo', doc, info)" title="编辑" v-tooltip>edit</i>
                                        <i class="btn btn-sm material-icons mr-2 px-1 text-danger" @click="$emit('removeExtendInfo', doc, info)" title="删除" v-tooltip>delete_forever</i>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                    </div>
                </div>
            </div>
            <div class="card-footer d-flex flex-row flex-shrink-0">
                <slot name="footer-bar">
                    
                </slot>
                <button type="button" class="btn btn-sm btn-info ml-auto" @click="$emit('addExtendInfo', doc)">
                    添加自定义信息
                </button>
                <button type="button" class="btn btn-sm btn-primary mx-2" @click="$emit('rename', doc)">
                    重命名
                </button>
                <button type="button" class="btn btn-sm btn-outline-dark mx-2" @click="$emit('close')">
                    关闭
                </button>
                
            </div>
        </div>
    </div>
</template>

<script type="text/javascript">
import Scrollbar from 'smooth-scrollbar';
import _ from 'lodash'

var constant = {
    
};

export {constant};

export default {
    props: {
        doc: {
            required: true
        },
        hasPrev: {
            type: Boolean,
            default: true
        },
        hasNext: {
            type: Boolean,
            default: true
        },
    },
    data() {
        return Object.assign({
            activeTab: null
        }, {constant});
    },
    computed: {
        groupedExtendInfo() {
            var arr = this.doc.extendInfo;
            var rs = _.orderBy(arr, ['date'], 'desc');
            rs = _.groupBy(rs, 'title');
            var keys = Object.keys(rs).sort(
                (a, b) => a > b ? 1 : a == b ? 0 : -1
            );
            return {
                keys,
                data: rs,
                uid: _.uniqueId('extendInfo-')
            }
        },
        baseInfo() {
            var transform = {
                name: '名字',
                shape: {
                    name: '尺寸',
                    parse: () => `${this.doc.baseInfo.width} x ${this.doc.baseInfo.height}`
                },
                aspectRatio: {
                    name: '宽高比',
                    parse: val => Math.round(val * 100) / 100
                },
                size: {
                    name: '文件大小',
                    parse: this.formateSize
                },
                src: '图片URL',
                createDate: {
                    name: '创建日期',
                    parse: this.formateDate
                },
                lastModifyDate: {
                    name: '最后修改时间',
                    parse: this.formateDate
                }
            };
            var obj = {};
            for (var i in transform) {
                var target = transform[i], val = this.doc.baseInfo[i];
                if (target.parse) {
                    obj[target.name] = target.parse(val);
                } else {
                    obj[target] = val;
                }
            }
            return obj;
        },
    },
    methods: {
        

    },
    mounted() {
        this.$el.querySelectorAll('.info-list').forEach(x => Scrollbar.init(x))
    },
    destroyed() {
        this.$el.querySelectorAll('.info-list').forEach(x => Scrollbar.destroy(x))

    }
}
</script>

<style type="text/css" scoped>
.info-list {
    overflow: hidden;
}

.image-card {
    position: absolute;
    width: 100%;
    height: 100%;
}

.image-card .img-box {
    min-width: 70vw;
    height: 50vh;
    background: rgba(133,133,133,.7);
    text-align: center;
    transition: all .5s;
}

.image-card .img-box img {
    max-width: 100%;
    max-height: 100%;
}

</style>